<template>
  <div id="goods-detail">
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      right-text="搜索"
      left-arrow
      @click-left="onClickLeft"
      
      fixed
      safe-area-inset-bottom="fasle"
    />
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      style="margin-top: 46px"
    >
      <van-swipe-item
        ><img src="../assets/img/gx1.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/gx2.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/gx3.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../assets/img/gx4.jpg" alt=""
      /></van-swipe-item>
    </van-swipe>

      <!-- 商品的标题 -->
      <div class="title">
        <div class="name" style="padding: 10px 10px">香朵儿运动服套装女2021春秋</div>
        <div class="explain" style="padding: 2px 10px">
            香朵儿运动服套装女2021春秋新款学生韩版宽松时尚休闲大码两件套</div>
        <div class="price" style="padding: 10px 10px">价格 ￥：30.9</div>
      </div>
      <!-- 商品详情介绍 -->
      <div class="contents" style="margin: 0px">
        <span>商品详情</span>
        <span>评价</span>
      </div>
      <div class="info" style="padding: 0px ">
        <img src="../assets/img/gx6.jpg" alt="">
        <img src="../assets/img/gx1.jpg" alt="">
        <img src="../assets/img/gx3.jpg" alt="">
        <img src="../assets/img/gx4.jpg" alt="">
      </div>

    <!-- sku -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"


      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />

    <!-- GoodsAction 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="cart"/>
      <van-goods-action-button type="danger" text="立即购买"  @click="onClickButton"/>
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "黑色", // skuValueName：规格值名称
                imgUrl: "http://t00img.yangkeduo.com/goods/images/2018-08-17/425b8a40a0e2562094492081fe2e3e81.jpeg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "http://t00img.yangkeduo.com/goods/images/2018-08-17/425b8a40a0e2562094492081fe2e3e81.jpeg", // 用于预览显示的规格类目图片
              },
              {
                id: "2",
                name: "白色",
                imgUrl: "http://t00img.yangkeduo.com/goods/images/2018-08-17/425b8a40a0e2562094492081fe2e3e81.jpeg",
                previewImgUrl: "http://t00img.yangkeduo.com/goods/images/2018-08-17/425b8a40a0e2562094492081fe2e3e81.jpeg",
              },
            ],
            largeImageMode: true, //  是否展示大图模式
          },
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "2", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 3090, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
        ],
        price: "30.90", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: "http://t03img.yangkeduo.com/images/2018-04-08/b493a724cb17bf149259143833d865f6.jpeg",
      },



      messageConfig: {
        // 数据结构见下方文档
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickButton(){
        this.show = true
    },
    onBuyClicked(){
        this.$router.push({name: "buy"})
    },
    onAddCartClicked(){

    },
    cart() {
      this.$router.push({ name: "cart" });
    },
  },

  computed: {},
};
</script>

<style scoped>
.van-nav-bar--fixed {
  height: 46px;
}
.van-goods-action {
  margin-bottom: 1px;
}

.my-swipe .van-swipe-item {
  width: 375px;
  height: 375px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item img {
  width: 375px;
  height: 375px;
}


  .title {
    /* margin-left: 10px; */
    background-color: #fff;
  }

  .title .name {
    font-size: 26px;
    line-height: 40px;
  }

  .title .explain {
    font-size: 14px;
    color: #555;
  }

  .title .price {
    font-size: 20px;
    font-weight: bold;
    line-height: 25px;
    color: #E8380D;
  }

  /* 弹性的父级元素 */
  .contents {
    margin-top: 10px;
    display: flex;
    text-align: center;
    background-color: #f6f6f6;
    font-size: 12px;
  }

  /* 子元素 */
  .contents span {
    flex: 1;
    margin: 10px 0;
    line-height: 20px;
  }
  .contents span:not(:last-child) {
    border-right: 1px solid #aaa;
  }

  /* 图片样式 */
  .info {
    padding-top: 20px;
  }

  .info img {
    display: block;
    width: 100%;
  }
</style>